<template>
  <div>
    <Header :head="head" />
    <div class="text">
      <input type="text" placeholder="用户名" v-model="us" />
    </div>
    <div class="text">
      <input type="text" placeholder="当前密码" v-model="ps" />
    </div>
    <div class="text">
      <input type="text" placeholder="新密码" v-model="newPs" />
    </div>
    <div class="text">
      <input type="text" placeholder="确认密码" v-model="newPs2" />
    </div>
    <div class="text text3">
      <input type="text" placeholder="验证码" v-model="code" />
      <Captcha />
    </div>
    <input type="button" value="修改" @click="modifyPs" />
  </div>
</template>

<script>
import Header from '../../common/Header'
import Captcha from '../../common/Captcha'
import { Toast } from 'mint-ui'
export default {
  components: {
    Header,
    Captcha
  },
  data() {
    return {
      head: '修改用密码',
      us: null,
      ps: null,
      newPs: null,
      newPs2: null,
      code: null
    }
  },
  methods: {
    modifyPs() {
      if (this.us && this.ps && this.newPs && this.newPs2) {
        if (this.newPs === this.newPs2) {
          if (this.ps != this.newPs) {
            this.toastInstanse = Toast({
              message: '修改中...',
              duration: -1
            })
            this.$http
              .post(
                'v2/changepassword',
                JSON.stringify({
                  username: this.us,
                  oldpassWord: this.ps,
                  newpassword: this.newPs,
                  confirmpassword: this.newPs2,
                  captcha_code: this.code
                })
              )
              .then(data => {
                if (data.body.status === 1) {
                  this.toastInstanse.close()
                  window.console.log(data.body)
                  Toast({
                    message: '修改成功',
                    duration: 1000
                  })
                  //修改成功后返回账户信息
                  window.location.hash = '/major/my/detailed'
                } else {
                  this.toastInstanse.close()
                  Toast({
                    message: data.body.message,
                    duration: 1000
                  })
                  window.console.log(data.body)
                }
              })
              .catch(() => {
                this.toastInstanse.close()
                Toast({
                  message: '数据异常,请检查网络',
                  duration: 1000
                })
              })
          } else {
            Toast({
              message: '新密码与旧密码相同',
              duration: 1000
            })
          }
        } else {
          Toast({
            message: '密码与验证密码不一致',
            duration: 1000
          })
        }
      } else {
        Toast({
          message: '所有项都不能为空',
          duration: 1000
        })
      }
    }
  }
}
</script>
<style  scoped>
input[type='button'] {
  margin: 5vw 5% 0 5%;
  width: 90%;
  background-color: #26a2ff;
  color: white;
}
input[type='text'],
input[type='password'] {
  margin: 0 !important;
  border: none !important;
  background-color: #f5f5f5;
}
p {
  color: red;
  margin: 0;
  font-size: 3vw;
}
.text {
  /*border-top: 1px #aaa solid;*/
  border-bottom: 1px #aaa solid;

  position: relative;
}
.text > input {
  background-color: white;
}
.text3 {
  display: flex;
}
.text3 > input {
  flex: 3;
}
</style>